<template>
  <div class="search-container">
    <com-header/>
    <a-layout-content style="min-height: 750px" class="container">
      <a-row>
        <a-col :xs="12" :sm="8" :md="16" :lg="18" :xl="20" :xxl="20" :span="20">
          <com-title title="搜索结果"/>
          <a-row v-if="list.length" :gutter="[16,16]">
            <a-col v-for="cart in list"                     :key="cart.url"
                   :xs="12" :sm="8" :md="8" :lg="6" :xl="4" :xxl="4" :span="4">
              <a-card @click="to_page(cart)"
                      hoverable style="width: 100%;">
                <img slot="cover"
                     :src="cart.img" :to="`/desc-va?url=${cart.url}&title=${cart.title}`"
                     style="width: 100%; height: 153px;object-fit: cover" :alt="cart.title">
                <a-card-meta :title="cart.title">
                  <template slot="description">
                    {{ cart.desc }}
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
          <a-empty style="min-height: 350px" v-else/>
        </a-col>
        <a-col style="padding-left: 20px" :xs="0" :sm="0" :md="8" :lg="6" :xl="4" :xxl="4" :span="4">
          <com-title title="热播榜"/>
          <div class="hot">
            <p v-for="(item, index) in hotquery"
               :key="index"
               @click="to_search(item)"
               >
              <span class="index">{{index + 1}}</span>
              <span class="text">{{item}}</span>
            </p>
          </div>
        </a-col>
      </a-row>

    </a-layout-content>
    <com-footer/>
  </div>
</template>

<script>
export default {
  name: "search",

  watchQuery: true,
  key(route) {
    return route.fullPath
  },
  head() {
    return {
      title: '首页',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ],

    }
  },

  async asyncData({app, $axios, query}) {
    let res = {};
    if (query.kw) {
       res = await app.$api_parse360.search(query.kw)
    }
    const res1 = await app.$api_parse360.hotquery();
    return {
      list: (res.list || []),
      hotquery: (res1.list || []),
    }

  },

  mounted() {
  },

  methods: {
    to_search(text) {
      this.$router.push({path: '/search', query: {kw: text}})
    },
    to_page(query) {
      this.$router.push({
        path: '/desc-va',
        query: {
          url: query.url,
          title: query.title
        }
      })
    },

  }

}
</script>

<style lang="scss">
.search-container {
  .hot {
    p {
      display: flex;
      align-items: center;
      cursor: pointer;
      .index {
        text-align: center;
        line-height: 20px;
        border-radius: 4px;
        background: $explain-color;
        color: $white;
        @include wh(20px, 20px);
        font-size: 12px;
      }
      .text {
        padding: 0 10px;
        font-size: 12px;
        &:hover {
          color: #00C78F;
        }
      }
    }

    p:nth-child(1) {
      .index {
        background: $danger-color;
      }
    }
    p:nth-child(2) {
      .index {
        background: $danger-color-disable;
      }
    }
    p:nth-child(3) {
      .index {
        background: $waring-color;
      }
    }
  }
}
</style>
